import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Picker, Provider, Button} from '@ant-design/react-native';

const customData = [
    { value: '1', label: '空调' },
    { value: '2', label: '扫地机器人' },
    { value: '3', label: '冰箱' },
    { value: '4', label: '洗衣机' },
    { value: '5', label: '微波炉' },
    { value: '6', label: '电饭煲' },
    { value: '7', label: '空气净化器' },
    { value: '8', label: '电热水器' },
    { value: '9', label: '油烟机' },
    { value: '10', label: '洗碗机' },
];

function DevicePicker() {
    const [visible, setVisible] = useState(false);
    const [selectedValue, setSelectedValue] = useState('');
    const selectedLabel = selectedValue
    ? (customData.find(item => item.value === selectedValue)?.label || "点击以选择")
    : "点击以选择";

    return (
        <Provider>
            <View style={{ padding: 20 }}>
                <TouchableOpacity style={styles.button} onPress={() => setVisible(true)}>
                    <Text style={styles.text1}>设备类型</Text>
                    <Text style={styles.text2}>{selectedLabel}</Text>
                </TouchableOpacity>
                <Picker
                    data={customData}
                    cols={1}
                    visible={visible}
                    value={selectedValue ? [selectedValue] : []}
                    onOk={(value) => {
                        setSelectedValue(String(value[0]));
                        setVisible(false); 
                }}
                onDismiss={() => setVisible(false)}
                />
            </View>
        </Provider>
    );
}
const styles = StyleSheet.create({
    button: {
        width: 330,
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 20,
        paddingHorizontal: 16,
    },
    text1: {
        fontSize: 16,
        color: '#000',
    },
    text2: {
        fontSize: 16,
        color: '#888',
    },
});


export default DevicePicker;


